import React, {useEffect, useRef, useState} from 'react';
import { forwardRef } from 'react';
import './index.scss';
import * as echarts from "echarts";

export interface MetricTab {
  id: string;
  text: string;
  isActive?: boolean;
  onClick?: () => void;
}

export interface WeatherMetricsProps {
  width?: string | number;
  height?: string | number;
  tabs?: MetricTab[];
  activeBackgroundImage?: string;
  inactiveBackgroundImage?: string;
  actionIcon?: string;
  activeTextColor?: string;
  inactiveTextColor?: string;
  borderColor?: string;
  backgroundColor?: string;
  showActionIcon?: boolean;
  onTabClick?: (tab: MetricTab, index: number) => void;
  onActionIconClick?: () => void;
  theme?: 'light' | 'dark';
  style?: React.CSSProperties;
  className?: string;
  onClick?: () => void;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const WeatherMetrics = forwardRef<HTMLDivElement, WeatherMetricsProps>((props, ref) => {
  const {
    width = 461,
    height = 32,
    tabs = [
      { id: '1', text: '2、3小时雨量', isActive: true },
      { id: '2', text: '24小时雨量', isActive: false },
      { id: '3', text: '24小时风速', isActive: false },
      { id: '4', text: '24小时温度', isActive: false }
    ],
    activeBackgroundImage = 'http://localhost:8085/static/images/qixiangfangzhai/bz149.png',
    inactiveBackgroundImage = 'http://localhost:8085/static/images/qixiangfangzhai/jxbf.png',
    actionIcon = 'http://localhost:8085/static/images/qixiangfangzhai/bz9.png',
    activeTextColor = '#FFFFFF',
    inactiveTextColor = 'rgba(255,255,255,0.9)',
    borderColor = '#3A4E74',
    backgroundColor = 'rgba(5,18,34,0.2)',
    showActionIcon = true,
    onTabClick,
    onActionIconClick,
    theme = 'dark',
    style = {},
    className = '',
    onClick,
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const componentStyle: React.CSSProperties = {
    width: typeof width === 'number' ? `${width}px` : width,
    height: typeof height === 'number' ? `${height}px` : height,
    ...style
  };
  const [activeTabIndex, setActiveTabIndex] = useState(0);
  const chartRef = useRef<HTMLDivElement>(null);
  const myChartData = {
    vehicleFlow: [120, 132, 101, 134, 90, 230],
    passengerFlow: [220, 182, 191, 234, 290, 330],
  }
  useEffect(() => {
    if (chartRef.current && myChartData) {
      const chartInstance = echarts.init(chartRef.current);
      const option = {
        color: '#32C5FF',
        grid: {
          left: '10%',
          right: '4%',
          top: '28%',
          bottom: '20%',
        },
        legend: {
          top: '0', // 顶部位置
          right: '15%', // 右侧位置
          icon: 'roundRect',
          itemHeight: 2,
          itemWidth: 16,
          textStyle: {
            fontSize: 12,
            color: 'rgba(255, 255, 255, 0.8)'
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#FFFFFF4C',
            },
          },
          nameTextStyle: {
            fontSize: 10,
          },
          axisLabel: {
            interval: 1
          },
          data: ['昨日早间', '昨日晚间', '昨日夜间', '今日早间', '今日晚间', '今日夜间'],

        },
        yAxis: {
          type: 'value',
          splitNumber: 2,
          name: '(mm)',
          nameTextStyle: {
            align: 'right'
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: 'rgba(255,255,255,0.3)',
            },
          },
          splitLine: {
            showMinLine: false,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255,255,255,0.1)',
            },
          }
        },
        series: [
          {
            name: '雨量',
            type: 'line',
            data: myChartData.vehicleFlow,
            symbol: 'none',
            smooth: true,
          },
        ],
      };
      chartInstance.setOption(option);
      window.addEventListener('resize', () => chartInstance.resize());
      return () => {
        chartInstance.dispose();
      };
    }
  }, [myChartData]);
  const handleTabClick = (tab: MetricTab, index: number) => {
    setActiveTabIndex(index);
    if (onTabClick) {
      onTabClick(tab, index);
    }
  };

  const handleActionIconClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (onActionIconClick) {
      onActionIconClick();
    }
  };

  const weatherMetricsClassName = ['weather-metrics', theme, className].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={weatherMetricsClassName}
      style={componentStyle}
      onClick={onClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      {/* 指标标签页 */}
      <div className="title-wrap">
        <div className="tab-selector">
          {tabs.map((tab, index) => (
            <div
              key={tab.id}
              className={`tab-item ${activeTabIndex === index ? 'isActive' : 'unActive'}`}
              onClick={() => handleTabClick(tab, index)}
            >
              {tab.text}
            </div>
          ))}
        </div>
        <div onClick={handleActionIconClick}
             className="action-icon"
             style={{backgroundImage: actionIcon ? `url(${actionIcon})` : undefined, width: '20px', height: '20px', backgroundSize: 'cover'}}></div>
      </div>
      <div className="chart-area">
        <div className="chart-container" ref={chartRef} style={{ width: '100%', height: '100%'}}>
        </div>
      </div>
    </div>
  );
});

WeatherMetrics.displayName = 'WeatherMetrics';

export default WeatherMetrics;
